<template>
    <div>
      <div style="border: 1px solid #ccc; margin-top: 10px">
        <!-- 工具栏 -->
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
            style="height: 400px; overflow-y: hidden"
            :defaultConfig="editorConfig"
            v-model="html"
            @onChange="onChange"
            @onCreated="onCreated"
        />
      </div>
      <el-button class="orangeButton" @click="save()">暂存</el-button>
      <div style="margin-top: 10px">
        <div></div>
      </div>
      <div></div>
    </div>
  </template>
  
  <script>
  import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
  import {marked} from 'marked'
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'BasicEditor',
    components: {Editor, Toolbar},
    props: ['theContent'],
    data() {
      return {
        editor: null,
        html: marked(this.theContent),
        toolbarConfig: {},
        editorConfig: {
          placeholder: "请输入内容...",
          // autoFocus: false,
  
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          MENU_CONF: {},
        },
        mode: 'default', // or 'simple'
      }
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      },
      onChange(editor) {
        console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      },
      save() {
        this.$emit('saveData', this.html)
        this.$message({
          message: "暂存成功，记得确认提交哦",
          type: "success",
        });
  
      }
    },
    mounted() {
      // 模拟 ajax 请求，异步渲染编辑器
      setTimeout(() => {
        this.html = marked(this.theContent)
      }, 1500)
    },
    beforeUnmount() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    }
  });
  </script>
  
  <style src='@wangeditor/editor/dist/css/style.css'></style>
  